<template>
  <div class="module-container">
    <ModuleHeader
      title="货币信用周期"
      subtitle="Currency Credit Cycle"
    />

    <div class="chart-container">
      <CurrencyCreditChart
        :series="currencyCreditChartSeries"
        :height="300"
        :y-axis-range="[-20, 20]"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useCurrencyCreditData } from '../hooks/useCurrencyCreditData'
import CurrencyCreditChart from './CurrencyCreditChart.vue'
import ModuleHeader from '../common/ModuleHeader.vue'

const { currencyCreditData } = useCurrencyCreditData()

// 货币信用周期图表数据 - 包含所有系列
const currencyCreditChartSeries = computed(() => [
  currencyCreditData.value.looseMoneyLooseCredit,
  currencyCreditData.value.looseMoneyTightCredit,
  currencyCreditData.value.tightMoneyLooseCredit,
  currencyCreditData.value.tightMoneyTightCredit,
  currencyCreditData.value.credit,
  currencyCreditData.value.currency
])
</script>

<style scoped>
.module-container {
  @apply bg-white rounded-[4px] shadow-sm mb-6 overflow-hidden;
  border: 1px solid #D4D8E5;
}

.chart-container {
  @apply p-6;
}
</style>
